<template>
  <div :style="divimg">
    <div style="padding-top: 10%;width: 100%;height: 100%;">

      <div style="margin-left: 35%">
        <el-tabs v-model="activeName" style="width: 45%">
          <el-tab-pane label="账户登录" name="first">
            <el-form ref="form" :model="form" label-width="80px" style="width: 100%">
              <el-form-item label="用户名">
                <el-input placeholder="请输入登录名" v-model="form.userName"></el-input>
              </el-form-item>
              <el-form-item label="密码">
                <el-input placeholder="请输入密码" v-model="form.password" show-password></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit" style="width: 100%">登录</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="短信/邮箱登录" name="second">

            <el-form ref="form" :model="form" label-width="80px" style="width: 100%">
              <el-form-item label="手机/邮箱">
                <el-input placeholder="请输入手机号/邮箱" v-model="form.userName"></el-input>
              </el-form-item>
              <el-form-item label="验证码">
                <el-input placeholder="请输入验证码" v-model="form.password">
                  <!--                  <el-button slot="append" @click="getMessageCode">点击获取验证码</el-button>-->
                  <el-button slot="append" v-show="show"   @click="getMessageCode"> </el-button>
                  <el-button slot="append" v-show="!show" class="count">再次获取{{count}}秒后</el-button>
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmitMessage" style="width: 100%">登录</el-button>
              </el-form-item>
            </el-form>

          </el-tab-pane>
        </el-tabs>


        <el-breadcrumb separator="|" style="margin-left:20%;margin-top: 50px">
          <el-breadcrumb-item>
            <el-link @click="toRegister">立即注册</el-link>
          </el-breadcrumb-item>
          <el-breadcrumb-item>
            <el-link @click="forgetPassword">忘记密码</el-link>
          </el-breadcrumb-item>
        </el-breadcrumb>

      </div>

      <!--    <img src="http://148.70.46.222:9000/test/013.png"/>-->

    </div>
  </div>
</template>

<script>

  export default {
    name: "login",
    data() {
      return {
        divimg: { //背景图片的使用
          backgroundImage: "url(" + require('../../assets/s.jpg') + ")",
          backgroundRepeat: "no-repeat",
          height: "100%",
          width: "100%",
          overflow: "hidden",
          backgroundSize: "cover"
        },
        activeName: 'first',
        form: {
          userName: '',
          password: '',
          tel: "",
          code: ""
        },
        show: true,
        count: '',
        timer: null,
        yz:''
      }
    },
    methods: {
      onSubmit() {
        this.$axios.post(this.$gloableData.serverPath + "auth/forLogin", this.$data.form).then((response) => {

          if (response.data.code == 1006) {
            //存储Token到本地
            window.localStorage.removeItem("token")
            window.localStorage.setItem("token", response.headers["token"])

            //存储用户信息，这是一个用户的登录名
            let loginName = "" + response.data.userInfo;
            this.$store.state.userId = uuid;
            window.localStorage.setItem("userInfo", loginName)
            console.log(name);
            //跳转到home界面
            this.$router.push({
              name: "home",
              params: {
                name: name
              }
            });

          } else {
            this.$message.error('登录失败，用户名或密码错误！');
          }
        }).catch((error => {
          this.$message.error(JSON.stringify(error.data));
        }));
      },
      onSubmitMessage() {
        console.log(this.$data.form)
        console.log("yz"+this.yz)
        this.$axios.post(this.$gloableData.serverPath + "auth/forLogin", this.$data.form).then((response) => {

          if (response.data.code == 1006) {
            //存储Token到本地
            window.localStorage.removeItem("token")
            window.localStorage.setItem("token", response.headers["token"])

            //存储用户信息，这是一个用户的登录名
            let loginName = "" + response.data.userInfo;
            this.$store.state.userId = uuid;
            window.localStorage.setItem("userInfo", loginName)
            console.log("用户名:"+name);
            //跳转到home界面
            this.$router.push({
              name: "home",
              params: {
                name: name
              }
            });

          } else {
            this.$message.error('登录失败，用户名或密码错误！');
          }
        }).catch((error => {
          this.$message.error(JSON.stringify(error.data));
        }));


        // if(this.form.password==this.yz){
        //     this.$axios.get(this.$gloableData.serverPath+"auth/forLogin",this.$data.form).then((response)=>{
        //
        //         if(response.data.code==1006){
        //             console.log(response)
        //             //存储Token到本地
        //             window.localStorage.removeItem("token")
        //             window.localStorage.setItem("token",response.headers["token"])
        //             //跳转到home界面
        //             this.$router.push("/home")
        //             //存储用户信息，这是一个用户的登录名
        //             let loginName=""+response.data.userInfo;
        //             this.$store.state.userId=loginName;
        //             window.localStorage.setItem("userInfo",loginName)
        //         }else{
        //             this.$message.error('登录失败，用户名或密码错误！');
        //         }
        //     }).catch((error=>{
        //         this.$message.error(JSON.stringify(error.data));
        //     }))
        // }else{
        //     this.$notify.error({
        //         title: '提示',
        //         message: '您输入的手机号不存在或验证码不正确！！'
        //     });
        //}
      },
      getMessageCode() {
        // 发送验证码
        this.$axios.get(this.$gloableData.serverPath+"auth/yan",{params:{
            tel:this.$data.form.userName
          }}).then(res=>{
          console.log(res);
          this.yz = res.data.verificationCode;
          console.log("赋值----",this.yz);
        });


        this.$notify({
          title: '成功',
          message: '验证码发送成功，请注意查收！！！',
          type: 'success'
        });
        const TIME_COUNT = 60;
        if (!this.timer) {
          this.count = TIME_COUNT;
          this.show = false;
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= TIME_COUNT) {
              this.count--;
            } else {
              this.yz = '';
              console.log("倒计时结束----",this.yz);
              this.$notify.error({
                title: '提示',
                message: '您的验证码已过期，请重新获取！！！'
              });
              this.show = true;
              clearInterval(this.timer);
              this.timer = null;
            }
          }, 1000)
        }
      },
      toRegister() {
        this.$router.push("/register")
      },
      forgetPassword() {
        this.$router.push("/forgetPass")
      }
    }
  }
</script>
<style scoped>

</style>
